import React,{useEffect,useRef} from 'react'
import * as echarts from 'echarts'
export default function home() {
    const chartRef = useRef()
    const options={
      xAxis: {
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
      },
      yAxis: {
        type: 'value'
      },
      series: [
        {
          data: [120, 200, 150, 80, 70, 110, 130],
          type: 'bar'
        }
      ]
    };

  useEffect(()=>{
    const chart = echarts.init(chartRef.current)
    chart.setOption(options)
    return () => {
        chart.dispose()
    }
  },[])
 const Img = `http://xawn.f3322.net:8002/distremote/static/avatar/${JSON.parse(localStorage.userInfo).avatar}`
  const userInfo = JSON.parse(localStorage.userInfo)
  return (
    <div>
      <div style={{padding:'20px 35px',backgroundColor:'white'}}>
       <div style={{display:'flex',justifyContent:'space-between',border:'1px solid #F1F1F1'}}>
        <div style={{padding:'20px 35px',display:'flex',alignItems:'center'}}>
          <img src={Img} style={{width:'90px',height:'90px'}} alt="" />
          <div style={{marginLeft:'10px'}}>
             <h1 style={{fontSize:'22px'}}>上午好，{userInfo.username},几天没见又更好看了呢😍</h1>
             <h3 style={{color:'#8C8C8C'}}>{userInfo.deptName} | {userInfo.roleName}</h3>
             <h3 style={{color:'#8C8C8C'}}>上次登陆时间:{userInfo.lastLoginTime}</h3>
          </div>
        </div>
        <div style={{display:'flex',justifyContent:'center',alignItems:'center',fontSize:'20px',marginRight:'40px',color:'#8C8C8C'}}>
          <div>
            <p>今日Ip</p>
            <p style={{color:'skyblue'}}>0</p>
          </div>
          <div style={{margin:'0 35px'}}>
            <p>今日访问</p>
            <p  style={{color:'skyblue'}}>0</p>
          </div>
          <div>
            <p>总访问量</p>
            <p  style={{color:'skyblue'}}>0</p>
          </div>
        </div>
       </div>
       <div  style={{display:'flex',justifyContent:'space-between',marginTop:'10px',width:'100%'}}>
        <div style={{border:'1px solid #F1F1F1',padding:'20px 35px',width:'48%'}}>
           <h3>近七日系统访问记录</h3>
           <div style={{width:'100%',height:'300px'}} ref={chartRef}></div>
        </div>
        <div style={{width:'48%',border:'1px solid #F1F1F1'}}>
           <div style={{display:'flex',justifyContent:'space-between',alignItems:'center',padding:'10px 20px',border:'1px solid #F1F1F1'}}>
            <h3>进行中的项目</h3>
            <h3>所有项目</h3>
          </div>
          <div>
          <div className='vn'>
              
                        <div style={{ display: "flex", flexWrap: "wrap" }}>
                            <div style={{ display: "flex", border: "1px solid #e8e8e8", alignItems: "center",width:'45%',  height: "60px" }}>
                                <div style={{ textIndent: "7px" }} >
                                    <span className="project-avatar ant-avatar ant-avatar-circle" style={{ backgroundColor: "#D6F8B8", color: "#42B983" }}>
                                        F
                                    </span>
                                </div>
                                <div style={{ lineHeight: "9px" }}>
                                    <p>RedRabbit-Shiro</p>
                                    <p>Spring Boot  权限管理系统。</p>
                                </div>


                            </div>

                            <div style={{ display: "flex", border: "1px solid #e8e8e8", alignItems: "center",width:'45%', height: "60px" }}>
                                <div style={{ textIndent: "7px" }} >
                                    <span className="project-avatar ant-avatar ant-avatar-circle" style={{ backgroundColor: "#D6F8B8", color: "#42B983" }}>
                                        F
                                    </span>
                                </div>
                                <div style={{ lineHeight: "9px" }}>
                                    <p>RedRabbit-Shiro</p>
                                    <p>Spring Boot 2.0.4 权限管理系统。</p>
                                </div>


                            </div>

                            <div style={{ display: "flex", border: "1px solid #e8e8e8", alignItems: "center", width:'45%', height: "60px" }}>
                                <div style={{ textIndent: "7px" }} >
                                    <span className="project-avatar ant-avatar ant-avatar-circle" style={{ backgroundColor: "#D6F8B8", color: "#42B983" }}>
                                        F
                                    </span>
                                </div>
                                <div style={{ lineHeight: "9px" }}>
                                    <p>RedRabbit-Shiro</p>
                                    <p>Spring Boot 2.0.4  权限管理系统。</p>
                                </div>


                            </div>

                            <div style={{ display: "flex", border: "1px solid #e8e8e8", alignItems: "center", width:'45%', height: "60px" }}>
                                <div style={{ textIndent: "7px" }} >
                                    <span className="project-avatar ant-avatar ant-avatar-circle" style={{ backgroundColor: "#D6F8B8", color: "#42B983" }}>
                                        F
                                    </span>
                                </div>
                                <div style={{ lineHeight: "9px" }}>
                                    <p>RedRabbit-Shiro</p>
                                    <p>Spring Boot 2.0.4  权限管理系统。</p>
                                </div>


                            </div>

                            <div style={{ display: "flex", border: "1px solid #e8e8e8", alignItems: "center", width:'45%', height: "60px" }}>
                                <div style={{ textIndent: "7px" }} >
                                    <span className="project-avatar ant-avatar ant-avatar-circle" style={{ backgroundColor: "#D6F8B8", color: "#42B983" }}>
                                        F
                                    </span>
                                </div>
                                <div style={{ lineHeight: "9px" }}>
                                    <p>RedRabbit-Shiro</p>
                                    <p>Spring Boot 2.0.4  权限管理系统。</p>
                                </div>


                            </div>

                            <div style={{ display: "flex", border: "1px solid #e8e8e8", alignItems: "center", width:'45%', height: "60px" }}>
                           

                            </div>
                          
                
               
                       

                        </div>

                    </div>
            </div>   
        </div>
       </div>
      </div>
    </div>
  )
}
